<template>
	<view class="zone">

		<image class="bg" src="http://image.qxgm.site/tdz/img/liandan/mg-11.png" mode="widthFix"></image>
		<Header title="炼丹"></Header>
		<view class="guizebox">
			<image class="guize" @click="show=true" src="http://image.qxgm.site/tdz/img/liandan/mg-04.png"
				mode="widthFix"></image>
			<image class="guize" @click="$p.navto('/pages/index/alchemyRecord')"
				src="http://image.qxgm.site/tdz/img/liandan/mg-03.png" mode="widthFix"></image>
			<image class="guize" @click="$p.navto('/pages/index/strategy?id=3')"
				src="http://image.qxgm.site/tdz/img/home/mg-1.png" mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="danlu">
				<image class="danluimg" src="http://image.qxgm.site/tdz/img/liandan/mg-01.png" mode="widthFix"></image>
				<image class="roate" src="http://image.qxgm.site/tdz/img/liandan/xuanbg.png" mode="widthFix"
					v-if="lianzhiState==1"></image>
				<image class="roate xiao" src="http://image.qxgm.site/tdz/img/home/dan1.png" mode="widthFix"
					v-if="lianzhiState==1"></image>
			</view>


			<view class="lainzho" v-if="isOpen==1">
				<!-- <image class="xuanzcan" src="http://image.qxgm.site/tdz/img/liandan/xuanbg.png" mode="widthFix"></image> -->
				<view class="konan">
					<image class="knansa" :src="dangqianDanImg" mode="widthFix"></image>
					<text class="tsname">{{dangqianDan}}</text>
				</view>
				<view class="jka">
					<view class="zhuangtai">
						{{lianzhiState==1?'炼制中':'炼制完毕'}}
					</view>
					<view class="saojtime" v-if="lianzhiState==1">
						倒计时：<u-count-down :autoplay="true" separator-size='24' :font-size='24' separator-color='#FF3333'
							:show-days='false' :show-hours='true' :show-minutes='true' :show-seconds='false'
							separator='zh' color='#FF3333' bg-color='none' :timestamp="stimes"></u-count-down>
					</view>
				</view>
				<view class="jiasub" @click="getdan">
					{{lianzhiState==1?'加速':'取丹'}}
				</view>
			</view>

			<view class="yhbox">
				<view class="dangqianbox">
					当前丹方:{{dangqianDan}}
					<image class="egg" :src="dangqianDanImg" mode="widthFix"></image>x{{dangqianDanNum}}
				</view>

				<image @click="$p.navto('/pages/index/knapsack')" class="beibao"
					src="http://image.qxgm.site/tdz/img/liandan/mg-02.png" mode="widthFix"></image>
			</view>

			<view class="gbox">
				<view class="iconbg" @click="gomijin">
					<image src="http://image.qxgm.site/tdz/img/tk/san2.png" mode="widthFix" class="img zy"></image>
					<view class="p1">获取材料</view>
				</view>
				<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="box">
					<view class="m_title">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
						<text>需要材料</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
					</view>
					<view class="tlist">

						<view class="part" v-for="(item,index) in danList" :key="index">
							<view class="danname">
								{{item.name}}
							</view>
							<image class="dan" :src="item.img" mode="widthFix"></image>
							<view class="dannum"><text
									:class="[item.number>=item.need_num?'s2':'s1']">{{Math.floor(item.number)}}</text>/{{item.need_num}}
							</view>
						</view>

					</view>
					<view class="btns">
						<view class="btn1" @click="choose=true">
							选择丹方
						</view>
						<view class="btn2" @click="alchemyLian">
							炼丹
						</view>
					</view>

				</view>
			</view>
		</view>


		<!-- 炼制确认 -->
		<u-mask :show="refine">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>炼制确认</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">

							<view class="danbox1">
								<image class="tandanimg" :src="dangqianDanImg" mode="widthFix">
								</image>
								<view class="danbox2">
									<view class="tanname2">
										<text class="t1">{{dangqianDan}}</text>
										<text class="t2">已拥有：{{havedanNum}}</text>
									</view>
									<view class="tanname3">
										{{dangqianDandes}}
									</view>
								</view>
							</view>

							<view class="danboxcont">
								<view class="tanti">
									需要材料
								</view>
								<image class="tanhng" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png"
									mode="widthFix"></image>
								<view class="tanhbs">

									<view class="cailink" v-for="(item,index) in danList" :key="index">
										<view class="cainame">
											{{item.name}}
										</view>
										<image class="caiimg" :src="item.img" mode="widthFix">
										</image>
										<text class="caipo"><text
												style="color: red;">{{Math.floor(item.number)}}</text>/{{item.need_num}}</text>
									</view>

								</view>

							</view>
							<view class="bujingqi">
								<Number placeholder='请输入炼制份数' v-model="value" size="25px" :min="1" :max="10000"
									:input-width="300" color="#fff">
								</Number>
							</view>
							<view class="dangqian">
								本次开炉需要 <text class="col">{{dangqianDantime}}</text>
							</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="refineCon" @click="kailuliandan">开炉炼丹</u-button>
						</view>
					</view>
				</view>
				<image class="m_close" @click="refine = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">

							<view class="parts">
								<view class="sbimg">
									<image class="tanimg" :src="dangqianDanImg2" mode="widthFix">
									</image>
								</view>
								<view class="toan">
									{{dangqianDan2}}x{{dangqianDanNum2}}
								</view>
							</view>

						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>

					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>


		<!-- 玩法说明 -->
		<u-mask :show="show">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>玩法说明</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<scroll-view scroll-y="true" class="gundong2" @touchmove.stop>
								<view class="showbox">
									<view class="s1">
										炼制说明
									</view>
									<view class="s2">
										1.消耗材料可以炼制丹药
									</view>
									<view class="s2">
										2.炼制丹药100%成功
									</view>
								</view>
								<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png"
									mode="widthFix">
								</image>
								<view class="showbox">
									<view class="s1">
										炼制时间
									</view>
									<view class="s2">
										1.炼制时间只和丹方有关，和份数无关。
									</view>
								</view>
								<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png"
									mode="widthFix">
								</image>
								<view class="showbox">
									<view class="s1">
										加速说明
									</view>
									<view class="s2">
										1.炼制丹药可以看视频加速或好友助力加速。
									</view>
									<view class="s2">
										2.每次加速的时间相同。
									</view>
								</view>
								<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png"
									mode="widthFix">
								</image>
								<view class="showbox">
									<view class="s1">
										炼丹材料
									</view>
									<view class="s2">
										1.炼丹材料两大获取途径：历练(主要在千幻域、广寒域和罗天域)和药园
									</view>
								</view>
								<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png"
									mode="widthFix">
								</image>
								<view class="showbox">
									<view class="s1">
										可炼制丹药种类
									</view>
									<view class="s2">
										1.突破丹：用于小境界突破
									</view>
									<view class="s2">
										2.破境丹：用于大境界突破，境界越高，突破成功率越低
									</view>
									<view class="s2">
										3.天道破境丹：用于大境界突破，道祖以下100%成功
									</view>
									<view class="s2">
										4.战力丹：顾名思义，用来提高战力
									</view>
									<view class="s2">
										5.合欢丹：用于双修
									</view>
								</view>
							</scroll-view>


						</view>

					</view>
				</view>
				<image class="m_close" @click="show = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 加速 -->
		<u-mask :show="accelerate">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>加速</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jiasubox">
							<view class="jianbox">
								<image class="freeadimg" v-if="ad_free==1"
									src="http://image.qxgm.site/tdz/img/tk/mg-14.png" mode="widthFix"></image>

								<image class="seeAdv" src="http://image.qxgm.site/tdz/img/yaoyuan/smg-01.png"
									mode="widthFix"></image>
								<view class="jiaustile">
									观看视频可 <br> 加速30分钟
								</view>
								<view class="yikan">
									今日:<text>{{getspeeditem.video_num}}</text>/{{getspeeditem.video_max}}
								</view>
								<u-button :loading='isLoading' :plain="true" :hair-line="false" hover-class="none"
									:throttle-time="1000" class="seea"
									@click="seeadv">{{ad_free==1?'免广告加速':'看视频加速'}}</u-button>
							</view>
							<view class="jianbox">
								<image class="seeAdv" src="http://image.qxgm.site/tdz/img/yaoyuan/smg-02.png"
									mode="widthFix"></image>
								<view class="jiaustile">
									好友助力可 <br> 加速30分钟
								</view>
								<view class="yikan">
									今日:<text>{{getspeeditem.help_num}}</text>/{{getspeeditem.help_max}}
								</view>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="seea" @click='huhuan'>呼朋唤友</u-button>
							</view>
							<view class="jianbox">
								<image class="seeAdv" src="http://image.qxgm.site/tdz/img/yaoyuan/smg-03.png"
									mode="widthFix"></image>
								<view class="jiaustile">
									达到天骄之王<br> 加速30分钟
								</view>
								<view class="yikan">
									今日:<text>{{getspeeditem.vip_num}}</text>/{{getspeeditem.vip_max}}
								</view>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="seea" @click="huiyuanJia">会员加速</u-button>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="accelerate = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 好友助力 -->
		<u-mask :show="friend">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>好友助力</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<scroll-view scroll-y class="scrollbox" @scrolltolower="scnextrecord">
							<view class="item" v-for="(item,index) in friendlist" :key="index">
								<image class="header" :src="item.avatar" mode="widthFix"></image>
								<view class="ybox">
									<view class="name">
										昵称:{{item.username}}
									</view>
									<view class="sind">
										ID:{{item.invite_code}}
									</view>
								</view>
								<view :class="[item.is_send == 1 ? 'received' : 'receive' ]" @click="yaoqing(item)">
									{{item.is_send == 1 ? '已邀请' : '邀请'}}
								</view>
							</view>
							<view class="empty" v-if="friendlist.length==0">
								<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
								暂无数据
							</view>
							<view class="more" v-else>
								{{loadText}}
							</view>
						</scroll-view>
					</view>
				</view>
				<image class="m_close" @click="friend = false,friendlist = [],page = 1"
					src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 选择丹方 -->
		<u-mask :show="choose" :zoom='false' @click="choose = false">
			<view :class="['warp3',choose==true?'showHandler':'hideHandler'] " @tap.stop>
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info3">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>选择丹方</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>

						<scroll-view scroll-x="true" class="tantabs" @touchmove.stop>
							<view :class="['tab',tanStat==item.id?'act':'']" v-for="(item,index) in tanlist"
								:key="index" @click="changeTan(item.id)">
								{{item.name}}
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" class="gundong">
							<view class="caolist">
								<view class="link" v-for="(item,index) in danfangList2[tanStat]" :key="index"
									@click="chooseDan(item.id)">
									<view :class="['cparts',chooseId==item.id?'cpart':'']">
										<image class="cq1" :src="item.props.img" mode="widthFix"></image>
									</view>
									</image>
									<view class="cname">
										{{item.name}}
									</view>
								</view>
							</view>
						</scroll-view>


						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="sendAll" @click="lainzhi">确认丹方</u-button>

					</view>

				</view>
				<image class="m_close3" @click="choose = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>
		<!-- 苹果视频 -->
		<u-mask :show="showVideo">
			<view class="videoPop">
				<image class="videocss" :src="video" mode="heightFix"></image>
				<u-count-down class="potime" :autoplay="false" ref="uCountDown" separator-size='24' :font-size='24'
					separator-color='#fff' :show-seconds='true' :show-minutes='false' :show-hours='false' separator='zh'
					:show-days='false' color='#fff' bg-color='none' :timestamp="27"></u-count-down>
			</view>
		</u-mask>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				tanStat: 0,
				choose: false,
				chooseId: 0,
				accelerate: false,
				obtain: false,
				friend: false,
				value: 1,
				tanimg: '',
				tanName: '',
				tanDes: '',
				tanID: '',
				show: false,
				refine: false,
				danList: [],
				getspeeditem: {},
				friendlist: [],
				tanlist: [{
						id: 0,
						name: '全部',
						isrequest: false,
					},
					{
						id: 1,
						name: '筑基',
						isrequest: false,
					},
					{
						id: 2,
						name: '结丹',
						isrequest: false,
					},
					{
						id: 3,
						name: '元婴',
						isrequest: false,
					},
					{
						id: 4,
						name: '化神',
						isrequest: false,
					},
					{
						id: 5,
						name: '炼虚',
						isrequest: false,
					},
					{
						id: 6,
						name: '合体',
						isrequest: false,
					},
					{
						id: 7,
						name: '大乘',
						isrequest: false,
					},
					{
						id: 8,
						name: '真仙',
						isrequest: false,
					},
					{
						id: 9,
						name: '金仙',
						isrequest: false,
					},
					{
						id: 10,
						name: '大罗',
						isrequest: false,
					},
					{
						id: 11,
						name: '道祖',
						isrequest: false,
					},

				],
				danfangList2: {
					0: [],
					1: [],
					2: [],
					3: [],
					4: [],
					5: [],
					6: [],
					7: [],
					8: [],
					9: [],
					10: [],
					11: [],
					12: [],
				},
				dangqianDan: '',
				dangqianDanImg: '',
				dangqianDanNum: '',

				dangqianDan2: '',
				dangqianDanImg2: '',
				dangqianDanNum2: '',

				havedanNum: '',
				dangqianDandes: '',
				dangqianDantime: '',
				dangqianDantID: '',
				isOpen: 0,

				lianzhiState: '',
				stimes: '',

				page: 1,
				max_page: '',
				loadText: '没有更多了',

				showVideo: false,
				video: '',
				timer: '',


				isLoading: false,
				user_pill_id: '',
				urlCallback: {
					userId: uni.getStorageSync('id'),
					extra: ''
				},
				ad_free: '',
			}
		},
		onLoad() {
			this.liandanwayList(this.tanStat)
			this.getUserInfo()
		},
		onShow() {
			this.getdanList()
			this.accelerate = false
		},
		methods: {

			async getUserInfo() {
				// 获取个人信息
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.ad_free = res.data.free_ad
				}
			},
			async huhuan() {
				let res = await this.$http.index.getfriends({
					type: 2,
					page: this.page
				})
				if (res.code == 1) {
					this.friendlist = [...this.friendlist, ...res.data.data]
					this.max_page = res.data.last_page
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';


					this.friend = true
					this.accelerate = false
				}

			},
			scnextrecord() {
				if (this.page >= this.max_page) {
					this.loadText = '没有更多了'
					return;
				}
				this.loadText = '努力加载中';
				this.page = ++this.page;
				this.huhuan() //好有列表
				setTimeout(() => {
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
					else this.loadText = '努力加载中';
				}, 500)
			},
			//发送好友助力
			async yaoqing(item) {
				if (item.is_send == 1) {
					this.$u.toast('您今日已经发送过该好友助力')
					return
				}
				let res = await this.$http.index.msghelp({
					type: 1,
					help_user_id: item.id,
					source_id: this.dangqianDantID
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.friendlist = []
					this.page = 1
					this.friend = false
				}
			},

			// 获取个人信息
			async getdanList() {
				let res = await this.$http.index.liandanList()
				if (res.code == 1) {
					this.danList = res.data.props
					this.dangqianDan = res.data.get_props.name
					this.dangqianDanImg = res.data.get_props.img
					this.dangqianDanNum = parseInt(res.data.number)

					this.dangqianDandes = res.data.get_props.info
					this.dangqianDantime = res.data.time_str
					this.dangqianDantID = res.data.pill_id

					this.lianzhiState = res.data.pill.state
					this.stimes = res.data.pill.left_time
					this.user_pill_id = res.data.pill.user_pill_id
					this.urlCallback.extra = '3_' + (res.data.pill.user_pill_id ? res.data.pill.user_pill_id : '')
					this.havedanNum = parseInt(res.data.get_props.number)
					this.isOpen = res.data.pill.length != 0 ? 1 : 0
					console.log(this.urlCallback.extra);
				}
			},
			// 获取丹方列表
			async liandanwayList(id) {
				let res = await this.$http.index.liandanwayList({
					way_type: this.tanStat
				})
				if (res.code == 1) {
					this.danfangList2[id] = res.data
					this.tanlist[id].isrequest = true
				}
			},
			// 选择丹方等级
			changeTan(id) {
				this.tanStat = id
				// console.log(this.tanlist[this.tanStat].isrequest);
				if (!this.tanlist[this.tanStat].isrequest) {
					this.liandanwayList(this.tanStat)
				}
			},
			// 确认选择丹方
			chooseDan(id) {
				this.chooseId = id
			},
			// 确认炼制丹药刷新页面
			async lainzhi(item) {
				if (this.chooseId == '') {
					this.$u.toast('请先选择丹方')
					return
				}
				let res = await this.$http.index.liandanselectway({
					pill_id: this.chooseId
				})
				if (res.code == 1) {

					this.choose = false
					this.getdanList()
				}
				this.$u.toast(res.msg)
			},
			// 开始炼丹弹框
			alchemyLian() {
				this.refine = true
			},
			// 开炉炼丹
			async kailuliandan() {
				let res = await this.$http.index.liandanStart({
					pill_id: this.dangqianDantID,
					number: this.value
				})
				if (res.code == 1) {
					this.getdanList()
					this.refine = false
				} else {
					this.$u.toast(res.msg)
				}
			},

			// 加速/取丹
			async getdan() {
				if (this.lianzhiState == 1) {
					let res = await this.$http.index.getspeed({
						type: 3
					})
					if (res.code == 1) {
						this.getspeeditem = res.data
						this.accelerate = true
					}
				} else {
					let res = await this.$http.index.liandanfinish()
					if (res.code == 1) {
						uni.setStorageSync('dangqianDan2', this.dangqianDan)
						uni.setStorageSync('dangqianDanImg2', this.dangqianDanImg)
						uni.setStorageSync('dangqianDanNum2', this.dangqianDanNum)

						this.dangqianDan2 = uni.getStorageSync('dangqianDan2')
						this.dangqianDanImg2 = uni.getStorageSync('dangqianDanImg2')
						this.dangqianDanNum2 = uni.getStorageSync('dangqianDanNum2')
						this.obtain = true
						this.getdanList()
					} else {
						this.$u.toast(res.msg)
					}
				}
			},
			// vip加速
			async huiyuanJia() {
			
				if (this.getspeeditem.vip_num >= this.getspeeditem.vip_max) {
					this.$u.toast('VIP次数已达上线！')
					return
				}
				let res = await this.$http.index.vipAddspeed({
					type: 3,
					source: this.user_pill_id
				})
				if (res.code == 1) {
					this.getdanList()
					this.accelerate = false
					this.$u.toast('VIP加速成功！')
				} else {
					this.$u.toast(res.msg)
				}
			},
			// 看广告
			async seeadv() {
				this.$u.toast('正在维护中！')
				return
				if (this.getspeeditem.video_num >= this.getspeeditem.video_max) {
					this.$u.toast('广告次数已达上线！')
					return
				}
				if (this.ad_free == 0) {
					if (this.$u.os() == 'ios') {
						clearTimeout(this.timer)
						let videoSrc = Math.floor(Math.random() * 5) + 1
						this.video = 'http://image.qxgm.site/tdz/img/video' + videoSrc + '.gif'
						this.showVideo = true
						this.$refs.uCountDown.start();
						// 发送ios开始请求
						this.iosStar()
						this.timer = setTimeout(() => {
							this.showVideo = false
							// 发送ios开始结束
							this.iosEnd()
						}, 27000)
					} else if (this.$u.os() == 'android') {
						this.$p.navto('/pages/index/aniordvideo1?id=' + this.urlCallback.extra)
					} else {
						clearTimeout(this.timer)
						let videoSrc = Math.floor(Math.random() * 5) + 1
						this.video = 'http://image.qxgm.site/tdz/img/video' + videoSrc + '.gif'
						this.showVideo = true
						this.$refs.uCountDown.start();
						this.timer = setTimeout(() => {
							this.showVideo = false
						}, 27000)
					}
				} else {
					// todo 调用接口获得精力
					let res = await this.$http.index.adResult({
						type: 3,
						source: this.user_pill_id
					})
					if (res.code == 1) {
						this.getdanList()
						this.accelerate = false
						this.$u.toast('跳过广告获得加速成功！')
					} else {
						this.$u.toast(res.msg)
					}
				}

			},
			async iosStar() {
				let res = await this.$http.index.adlookStart({
					type: 3,
					source: this.user_pill_id
				})
			},
			async iosEnd() {
				let res = await this.$http.index.adlookEnd({
					type: 3,
					source: this.user_pill_id
				})
				if (res.code == 1) {
					this.getdanList()
					this.accelerate = false
				}
			},
			gomijin() {
				uni.switchTab({
					url: '/pages/tabbar/experience',
					animationType: 'none',
					animationDuration: 10
				})
			}
		}
	}
</script>

<style lang="less">
	.roate {
		animation: animal 2s linear infinite;
		-webkit-animation: animal 2s linear infinite;
	}

	@keyframes animal {
		0% {
			transform: rotate(0);
		}

		25% {
			transform: rotate(90deg);
		}

		50% {
			transform: rotate(180deg);
		}

		75% {
			transform: rotate(270deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.scrollbox {
		height: 300px;
		overflow-y: scroll;
		padding: 0 30px;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 2px;
			padding: 5px 9px;
			box-sizing: border-box;
		}

		.header {
			width: 47px;
			border-radius: 50%;
		}

		.name {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-bottom: 9px;
			white-space: nowrap;
			/*不允许换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
		}

		.ybox {
			flex: 1;
			margin-left: 4px;
			width: 0%;
		}

		.sind {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
		}

		.right {
			display: block;
			width: 60px;
			font-size: 12px;
			font-weight: normal;
			text-align: center;
			height: 30px;
			line-height: 31px;
			color: #f9e5b6;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.zone {
		position: relative;
		min-height: 100vh;
		background: #415c7d;
	}

	.bg {
		width: 100%;
		margin-top: -70px;
	}

	.guizebox {
		position: absolute;
		top: 34px;
		right: 13px;
		width: 60px;
		z-index: 999;

		image {
			width: 100%;
			margin-bottom: 15px;
		}
	}

	.jihuop {
		padding: 0 10%;

		.s1 {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
			line-height: 15px;
			margin-bottom: 12px;
		}

		.s2 {
			font-size: 12px;
			font-weight: normal;
			color: #666666;
			line-height: 15px;
			margin-bottom: 5px;
		}

		.ghang {
			width: 100%;
			margin-bottom: 12px;
		}

		.showbox {
			padding: 0 6%;
		}
	}

	.main {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 100%;
		text-align: center;

		.danlu {
			position: absolute;
			width: 77%;
			top: 21.5%;
			left: 51%;
			transform: translateX(-50%);

			.danluimg {
				width: 90%;
			}
		}

		.roate {
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			width: 67%;
			top: -21%;
		}

		.xiao {
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			top: 56%;
			width: 10%;
			left: 0.8%;
		}

		.lainzho {
			position: absolute;
			text-align: center;
			width: 100%;
			top: 22%;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
		}

		.konan {
			position: relative;
			display: block;
			z-index: 1;
			margin: 0 auto;
			width: 72px;
			padding: 5px 0 7px;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
			background-size: 100% 100%;
		}

		.knansa {
			display: block;
			margin: 0 auto;
			width: 46px;
		}

		.tsname {
			font-size: 12px;
			font-weight: normal;
			color: #FFFFCC;
			line-height: 12px;
		}

		.jka {
			position: relative;
			z-index: 1;
			display: block;
			margin: 0 auto;
			width: 34%;
			background: rgba(0, 0, 0, 0.66);
			border-radius: 10px;
			text-align: center;
			padding: 5px 0;
		}

		.zhuangtai {
			font-size: 15px;
			font-weight: normal;
			color: #FFFFFF;
		}

		.saojtime {
			font-size: 12px;
			color: #fff;
		}



		.jiasub {
			display: block;
			margin: 0 auto;
			width: 116px;
			height: 37px;
			text-align: center;
			line-height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #fbf1a7;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
			margin-top: 11vh;
		}

		.xuanzcan {
			position: absolute;
			top: -22%;
			left: 50%;
			transform: translateX(-50%);
			width: 50%;
		}
	}

	.yhbox {
		position: absolute;
		width: 100%;
		top: 65%;
		right: 13px;
		z-index: 999;
	}

	.dangqianbox {
		position: absolute;
		top: 0;
		left: 50%;
		width: 60%;
		transform: translateX(-50%);
		font-size: 15px;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/liandan/dabg.png) no-repeat;
		background-size: 100% 100%;
		padding: 13px 0;
	}

	.egg {
		width: 23px;
	}

	.beibao {
		float: right;
		width: 60px;
	}

	.gbox {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
	}


	.ping1 {
		width: 100%;
		display: flex;
	}

	.yun {
		position: absolute;
		top: -15%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0px 9px 7px;
	}

	.tlist {
		display: flex;
		align-items: center;
	}

	.part {
		position: relative;
		width: 24%;
		text-align: center;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-22.png) no-repeat;
		background-size: 100% 100%;
		padding: 11px 0 10px;
		margin-right: 1%;

		.danname {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-bottom: 7px;
		}

		.dannum {
			position: absolute;
			bottom: 8px;
			right: 8px;
			font-size: 12px;
			font-weight: normal;
			color: #fff;
			text-shadow: 0 1px 1px #000;

			text {
				color: red;
			}

			.s1 {
				color: red;
			}

			.s2 {
				color: #fff;
			}
		}

		.dan {
			width: 55%;
		}

		.lin {
			display: block;
			margin: 0px auto 0;
			width: 67%;
			font-size: 13px;
			height: 33px;
			font-weight: normal;
			color: #f9e5b6;
			line-height: 33px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.bujingqi {
		text-align: center;
		margin: 15px auto;
	}

	.jihuop2 {
		padding: 0 8%;
	}

	.danbox1 {
		display: flex;
		align-items: center;
		padding: 0 0px 0 4px;

		.tandanimg {
			width: 50px;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
			padding: 4px 5px;
			box-sizing: border-box;
			margin-right: 9px;
		}

		.tanname2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 13px;

			.t1 {
				font-size: 18px;
				font-weight: normal;
				color: #333333;
				line-height: 18px;
			}

			.t2 {
				font-size: 12px;
				font-weight: normal;
				color: #666666;
				line-height: 12px;
			}
		}

		.tanname3 {
			font-size: 12px;
			font-weight: normal;
			color: #666666;
			line-height: 12px;
		}
	}

	.gundong2 {
		max-height: 70vh;
	}

	.danboxcont {
		padding: 13px 0px 6px;
		margin-top: 6px;

		.tanhng {
			width: 100%;
		}

		.tanti {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-left: 10%;
		}

		.tanhbs {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cailink {
				position: relative;
				width: 24%;
				background: url(http://image.qxgm.site/tdz/img/liandan/yan.png) no-repeat;
				background-size: 100% 100%;
				text-align: center;
				padding: 10px 0 10px;
			}

			.caiimg {
				display: block;
				margin: 0 auto;
				width: 64%;
			}

			.cainame {
				font-size: 12px;
				font-weight: normal;
				color: #333333;
				line-height: 12px;
				margin-bottom: 7px;
			}

			.caipo {
				position: absolute;
				right: 7px;
				bottom: 6px;
				font-size: 14px;
				font-weight: normal;
				color: #FFFFFF;
				text-shadow: 0 1px 1px #000;
			}
		}


	}

	.refineCon {
		display: block;
		margin: 0px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.dangqian {
		font-size: 15px;
		font-weight: normal;
		color: #333333;
		line-height: 15px;
		text-align: center;
		margin-bottom: 15px;

		.col {
			color: #FF0000;
		}
	}


	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			display: block;
			margin: 0 auto;
			width: 64%;
			padding: 3% 7%;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}


	.jiasubox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 7%;

		.jianbox {
			position: relative;
			width: 33%;
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/yaoyuan/smg-04.png) no-repeat;
			background-size: 100% 100%;
			padding: 14px 0;
		}



		.freeadimg {
			position: absolute;
			left: 2px;
			top: 2px;
			width: 35px;
			z-index: 9;
		}

		.seeAdv {
			display: block;
			margin: 0 auto;
			width: 51%;
		}

		.jiaustile {
			font-size: 13px;
			font-weight: normal;
			color: #666666;
			line-height: 18px;
			margin: 12px 0;
		}

		.yikan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;

			text {
				color: #FF6600;
			}
		}

		.seea {
			width: 90%;
			margin: 8px auto 0;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #fef6c7;
			line-height: 29px;
			height: 29px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}

	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 2vh;

		.btn1 {
			width: 113px;
			height: 37px;
			text-align: center;
			line-height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #b0eff1;
			text-shadow: 0 1px 1px #000065;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-03.png) no-repeat;
			background-size: 100% 100%;
			margin-right: 18px;
		}

		.btn2 {
			width: 113px;
			height: 37px;
			text-align: center;
			line-height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #fbf1a7;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.tantabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin-bottom: 6px;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		width: 100%;

		.tab {
			display: inline-block;
			width: 16.6%;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-05.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			box-sizing: border-box;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.gundong {
		height: 196px;
		background: url(http://image.qxgm.site/tdz/img/daolv/mg-02.png) no-repeat;
		background-size: 100% 100%;
	}

	.caolist {
		display: flex;
		flex-wrap: wrap;
		padding: 5px 7px;

		.link {
			position: relative;
			width: 20%;
			margin-bottom: 10px;
		}

		.cparts {
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
			background-size: 100% 100%;
			padding: 7px 11px;
			box-sizing: border-box;
		}

		.cpart::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg2.png) no-repeat;
			background-size: 100% 100%;
			top: 0;
			left: 0;
		}

		.cq1 {
			width: 100%;
		}

		.cq2 {
			width: 94%;
			text-align: center;
			position: absolute;
			bottom: 4px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 20px;
			text-shadow: 0 1px 1px #000;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-18.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq3 {
			width: 42px;
			height: 20px;
			position: absolute;
			text-align: center;
			top: -5px;
			left: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
			background-size: 100% 100%;
		}


		.cname {
			font-size: 14px;
			font-weight: normal;
			color: #333;
			line-height: 14px;
			margin-top: 4px;
			text-align: center;
		}

	}

	.yun_mask {
		position: absolute;
		left: 0;
		top: -8%;
		width: 43%;
		z-index: 9;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 0px 0 6px;

		image {
			width: 18%;
		}

		text {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.m_close3 {
		position: absolute;
		top: -5%;
		right: 8px;
		width: 32px;
	}

	.m_info3 {
		display: block;
		margin: 0 auto;
		width: 100%;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		min-height: 280px;
	}

	.mask_content3 {
		.m_info3 {
			padding: 0% 6px 10px;
			box-sizing: border-box;
		}

	}

	.warp3 {
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.showHandler {
		animation: showHandler 0.8s forwards ease;
	}

	.hideHandler {
		animation: hideHandler 0.8s forwards ease;
	}

	@keyframes showHandler {
		0% {
			bottom: -50%;
		}

		100% {
			bottom: 0%;
		}
	}

	@keyframes hideHandler {
		0% {
			bottom: 0%;
		}

		100% {
			bottom: -50%;
		}
	}

	.sendAll {
		display: block;
		margin: 14px auto 0;
		width: 116px;
		height: 37px;
		text-align: center;
		line-height: 37px;
		font-size: 18px;
		font-weight: normal;
		color: #fbf1a7;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}

	.receive {
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.received {
		filter: grayscale(100%);
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.iconbg {
		background: url(http://image.qxgm.site/tdz/img/tk/shan1.png);
		background-size: 100% auto;
		position: absolute;
		left: 10px;
		top: -140px;
		z-index: 88888;
		width: 60px;
		height: 60px;
		text-align: center;

		.img {
			width: 80%;
			margin-top: 6px;
			margin-left: 5px;
		}

		.p1 {
			position: absolute;
			color: #ffffff;
			bottom: 0px;
			left: 3px;
			text-shadow: 0 1px 1px #a93939;
		}
	}

	.zy {
		animation: zymover linear .8s infinite;
	}

	@keyframes zymover {
		0% {
			transform: rotate(0);
		}

		25% {
			transform: rotate(10deg);
		}

		50% {
			transform: rotate(0);
		}

		75% {
			transform: rotate(-10deg);
		}

		100% {
			transform: rotate(0);
		}
	}
</style>